import React, {useState} from 'react';
import {connect, StoreProvider} from "../HookRedux";


const Sub = ({count, test, preProps}) => {
    console.log('test=============1=====', count)
    // let action = ''
    // if (preProps.count !== undefined) {
    //     if (count - preProps.count > 0) {
    //         action = '加'
    //     } else {
    //         action = '减'
    //     }
    // }
    return (
        <div>
            {/*<p>{action}1</p>*/}
            <p>{count}</p>
        </div>
    )
}

const stateMapper = ({
     count: {
         count,
         test
     }
}) => ({
    count,
    test
})

export const Child = connect(stateMapper)(Sub)

const Sub2 = ({test}) => {
    console.log('test=============2=====', test)

    return (
        <div>
            <p>{test}</p>
        </div>
    )
}
const stateMapper2 = ({
     count: {
         test
     }
 }) => ({
    test
})
export const Child2 = connect(stateMapper2)(Sub2)

const Sub3 = ({count, add, dec, reset, dispatch}) => {
    const [c, sc] = useState(0)
    return (
        <div>
            Count: {count}
            <button onClick={add}>+</button>
            <button onClick={dec}>-</button>
            <button onClick={reset}>reset</button>
            <input type="text" value={c} onChange={(e) => sc(+e.target.value)} />
            <button onClick={() => dispatch({type: 'count/set', payload: {count: c}})}>set</button>
        </div>
    )
}

const stateMapper3 = ({
  count: {
      count
  }
}) => ({
    count
})
const actionMapper = {
    add: (dispatch) => dispatch({type: 'count/increment'}),
    dec: (dispatch) => dispatch({type: 'count/decrement'}),
    reset: async (dispatch) => {
        setTimeout(() => {
            dispatch({type: 'count/reset'})
        }, 1000)
    },
}
export const Count = connect(stateMapper3, actionMapper)(Sub3)
